<template>
  <view class="search_page">
    <cl-nav-bar></cl-nav-bar>
    <view class="search">
      <uni-search-bar
        v-model="keyword"
        style="flex: 1"
        bgColor="#fff"
        radius="100"
        placeholder="请输入关键字进行搜索"
        cancelButton="none"
        @confirm="handleSearch"
      />
      <text class="pr_20 fs_26" @click="handleSearch">搜索</text>
    </view>
    <view class="history">
      <view class="history_top">
        <text class="history_top_title">搜索历史</text>
        <uni-icons
          type="trash"
          color="#333"
          size="20"
          v-if="status === 'default'"
          @click="status = 'delete'"
        />
        <view v-else>
          <text style="color: #81a9f0" @click="handleDelAll">清除所有</text>
          |
          <text @click="status = 'default'">完成</text>
        </view>
      </view>
      <view class="history_list">
        <view
          v-for="(item, idx) in historyList"
          :key="item"
          class="history_list_item"
          @click="handleToSearch(item)"
        >
          <text>{{ item }}</text>
          <uni-icons
            v-if="status === 'delete'"
            type="trash"
            color="#333"
            size="18"
            @click="handleDel(idx)"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'
const keyword = ref('')
const historyList = ref([])
// 状态：delete为删除状态
const status = ref('default')
onMounted(() => {
  historyList.value = uni.getStorageSync('search_history') || []
})
const handleSearch = () => {
  uni._toPage('/pages/goods/list?name=' + keyword.value)
  let idx = historyList.value.findIndex((item) => item === keyword.value)
  if (idx > -1) {
    historyList.value.splice(idx, 1)
  }
  historyList.value.unshift(keyword.value)
  keyword.value = ''
  sethistory()
}

const sethistory = () => {
  uni.setStorageSync('search_history', historyList.value)
}

const handleDel = (idx) => {
  historyList.value.splice(idx, 1)
}
const handleDelAll = () => {
  uni.showModal({
    title: '提示',
    content: '确认删除所有搜索历史？',
    success: function (res) {
      if (res.confirm) {
        console.log('用户点击确定')
        historyList.value = []
        sethistory()
        status.value = 'default'
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    },
  })
}

const handleToSearch = (item) => {
  if (status.value === 'default') {
    uni._toPage('/pages/goods/list?name=' + item)
  }
}
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  align-items: center;
  // background-color: #fff;
}
.history {
  padding: 20rpx;
  &_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24rpx;
    &_title {
      font-size: 28rpx;
      font-weight: bold;
    }
  }
  &_list {
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    font-size: 28rpx;
    &_item {
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      padding: 8rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fff;
      border-radius: 10rpx;
    }
  }
}
</style>
